<template>
    <searchComponent v-model:searchList="searchList" :type="type" :cur-tab="1" @search="handleSearch" @refresh="handleRefresh" />
    <el-card class="table-box">
        <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData" v-model:page-info="pageInfo"
            @pageChange="handlePageChange">
            
            <template #type>
                <el-table-column label="产品类型" prop="type" width="120">
                    <template #default="scope">
                        <span v-if="scope.row.type === 0 || scope.row.type === 1">日日保</span>
                        <span v-if="scope.row.type === 2 || scope.row.type === 3">长期保</span>
                    </template>
                </el-table-column>
            </template>
            <template #picture>
                <el-table-column label="图片" prop="fileUrl" width="120">
                    <template #default="scope">
                        <span v-if="!scope.row.fileUrl">--</span>
                        <div v-else>
                            <bigPicture text="点击查看" :imageUrl="scope.row.fileUrl" />
                        </div>
                    </template>
                </el-table-column>
            </template>
            <template #settings>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleShowAdd(scope.row)">编辑</el-button>
                        <el-button link type="danger" size="small" @click="handleWithdraw(scope.row)">撤销</el-button>
                    </template>
                </el-table-column>
            </template>
        </tableComponent>
    </el-card>
    <blacklist v-model:show="showAdd" type="update" :cur-tab="1" :cur-item="curItem" @success="handleRefresh" />
</template>
<script setup lang="ts">
import { ref, onMounted,onActivated } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import { getBlackList, updateBlackList } from 'api/tools/blackList.ts'
import searchComponent from './components/searchComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import bigPicture from '@/components/bigPicture/index.vue'
import blacklist from './components/dialog/blacklist.vue'

const props = defineProps({
    type: [Number, String], //1 企业  2 派遣单位  3 投保人员
    default: 1
})

const searchList = ref([
    {
        label: '名称',
        prop: 'name',
        type: 'input',
        inputType: 'text',
        placeholder: '请输入',
        value: '',
    }
])

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名',
        prop: 'name'
    },
    {
        label: '录入人',
        prop: 'createUserName'
    },
    {
        label: '产品类型',
        prop: 'type'
    },
    {
        label: '录入原因',
        prop: 'reason'
    },
    {
        label: '图片',
        prop: 'picture'
    },
    {
        label: '录入时间',
        prop: 'createTime'
    },
])

const tableData = ref([])

const getQueryData = () => {
    const data = {}
    for (const key in searchList.value) {
        data[searchList.value[key].prop] = searchList.value[key].value
    }
    return data
}

const getList = () => {
    const data = {
        type: props.type,
        pageNum: pageInfo.value.pageNum,
        pageSize: pageInfo.value.pageSize,
        ...getQueryData()
    }
    getBlackList(data).then(res => {
        tableData.value = res.rows || []
        pageInfo.value.total = res.total
    })
}

const handlePageChange = () => {
    setTimeout(() => {
        getList()
    }, 0)
}

const handleSearch = (val) => {
    // console.log(111, getList);
    getList()
}

const handleRefresh = () => {
    // pageInfo.value.pageNum = 1
    getList()
}

const showAdd = ref(false)
const curItem = ref({})
const handleShowAdd = (item) => {
    curItem.value = item
    showAdd.value = true
}

const handleWithdraw = (item) => {
    ElMessageBox.confirm(
        '撤销后将失去该人员/企业数据信息恢复正常，是否确定撤销？',
        '提示',
        {
            type: 'warning',
        }
    )
        .then(() => {
            doWithdraw(item.id)
        })
}

const doWithdraw = (id) => {
    updateBlackList({
        status: 1,
        id
    }).then(res => {
        ElMessage({
            message: '撤销成功',
            type: 'success'
        })
        getList()
    })
}

onMounted(() => {
    getList()
})
onActivated(() => {
    getList()
})
</script>
<style lang="scss" scoped>
.table-box {
    // padding: 20px;
}
.set-height {
    height: calc(100vh - 355px)
}
.set-margin {
    margin-left: -15px;
}
</style>